<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>OpenCascade.js example</title>
	</head>
	<style>
		body {
			margin: 0;
			overflow: hidden;
			height: 100vh;
			display: flex;
			flex-direction: column;
		}
		#menu {
			flex-basis: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
		}
		#viewport {
			flex-basis: 0;
			flex-grow: 1;
		}
	</style>
	<body>
		<div id="menu">
			<div>
				Width:
				<input type="range" min="20" max="100" value="50" oninput="changeSliderWidth(this.value)" />
			</div>
			<div>
				Height:
				<input type="range" min="20" max="150" value="70" oninput="changeSliderHeight(this.value)" />
			</div>
			<div>
				Thickness:
				<input type="range" min="5" max="100" value="30" oninput="changeSliderThickness(this.value)" />
			</div>

			<input id="step-file" name="step-file" type="file" accept=".iges,.step,.igs,.stp" style="display:none;"/>
			<label for="step-file" title="Load STEP from File" style="border: 1px solid gray;background-color: #ffffff;padding: 1.5px 5px 2px 5px">Load STEP/IGES</label>
		</div>
		<div id="viewport">
		</div>
	</body>
</html>
